<!--
 * @Descripttion: 
 * @version: 
 * @Author: Xyl
 * @Date: 2023-05-02 00:29:53
 * @LastEditors: zoey
 * @LastEditTime: 2023-05-18 16:55:19
-->
<template>
  <div>
    <!-- 详情展示界面 -->
    <a-drawer title="详情展示" destroyOnClose width="500px" placement="left" :visible="isDrawerShow"
      @close="isDrawerShow=false">
      <a-list item-layout="horizontal" :data-source="currDrawerShowform">
        <a-list-item slot="renderItem" slot-scope="item">
          <a-list-item-meta :description="item.value">
            <a slot="title" href="">{{item.title}}</a>
          </a-list-item-meta>
        </a-list-item>
      </a-list>
    </a-drawer>


    <!-- 开始取证按钮 -->
    <!-- <a-button type="primary" @click="startForensics" style="margin: 10px;">
      开始取证
    </a-button> -->
    <!-- 表格 -->
    <!-- <div style="color:#d0d0d0" :visib
     le.sync="uuid">
      {{ this.uuid }}
    </div> -->
    <a-table :columns="columns" rowKey="hash" :data-source="datalt" :customHeaderRow="customHeaderRow"
      :customRow="customRow" :rowClassName="tableRowClass" bordered>
      <!-- <span slot="start_time" slot-scope="text,record">
        <a-tooltip placement="topLeft">
          <template slot="title">
            <span>{{record.start_time}}</span>
          </template>
        </a-tooltip>
      </span> -->
      <template v-slot:is_changed="{ text }">
        <span>{{ (text === 1 || text === true || text ==="1")? '是' : '否' }}</span>
      </template>
      <template slot="verification" slot-scope="text,record">
        <a-button type="link" size="small" href="javascript:;" @click="verify(record,text)" style="color:red">验证
        </a-button>
      </template>
      <template slot="attackForensics" slot-scope="text, record">
        <!-- 网络行为取证按钮 -->
        <a-button type="link" @click="navigateToForensics('attack', record.ID)" style="color:wheat">网络行为取证</a-button>
      </template>
      <template slot="threadForensics" slot-scope="text, record">
        <!-- 线程取证按钮 -->
        <a-button type="link" @click="navigateToForensics('thread', record.ID)" style="color:wheat">线程取证</a-button>
      </template>
      <template slot="processForensics" slot-scope="text, record">
        <!-- 进程取证按钮 -->
        <a-button type="link" @click="navigateToForensics('process', record.ID)" style="color:wheat">进程取证</a-button>
      </template>
      <template slot="memoryForensics" slot-scope="text, record">
        <!-- 内存取证按钮 -->
        <a-button type="link" @click="navigateToForensics('memory', record.ID)" style="color:wheat">内存取证</a-button>
      </template>

    </a-table>
    <!-- <a-modal :visible="modalVisible" @cancel="handleCancel"></a-modal> -->
  </div>
</template>
<script>
  import axios from 'axios';
  import { parseTime } from '@/utils/date.js';
  import { getCertificateNumber } from '@/utils/getcertificatenumber.js';

  const columns = [
    {
      title: '区块ID',
      sorter: false,
      sortField: 'ID',
      dataIndex: 'ID',
      width: 0.0625,
      ellipsis: true,
      scopedSlots: { customRender: 'ID' },
    },
    
    {
      title: '取证时间',
      sorter: (a, b) => {
        let aTime = new Date(a.start_time).getTime()
        let bTime = new Date(b.start_time).getTime()
        return aTime - bTime
      },
      sortField: 'start_time',
      sortDirections: ['descend', 'ascend', 'descend'],
      // 配置默认是倒序
      defaultSortOrder: 'descend',
      dataIndex: 'start_time',
      width: 1 / 12,
      ellipsis: true,
      scopedSlots: { customRender: 'start_time' },
    },
    
    // {
    //   title: '安全事件',
    //   sorter: false,
    //   sortField: 'attack_category',
    //   dataIndex: 'attack_category',
    //   width: 1 / 12,
    //   ellipsis: true,
    //   scopedSlots: { customRender: 'attack_category' },
    // },
    {
      title: '源IP',
      sorter: false,
      sortField: 'source_IP',
      dataIndex: 'source_IP',
      width: 1 / 12,
      ellipsis: true,
      scopedSlots: { customRender: 'source_IP' },
    },
    {
      title: '目的IP',
      sorter: false,
      sortField: 'destination_IP',
      dataIndex: 'destination_IP',
      width: 1 / 12,
      ellipsis: true,
      scopedSlots: { customRender: 'destination_IP' },
    },
    
    // {
    //   title: '路由表',
    //   sorter: false,
    //   sortField: '',
    //   dataIndex: '',
    //   key: 'download',
    //   width: 1 / 12,
    //   // scopedSlots: { customRender: 'opration2' }
    // },
    {
      title: '网络行为取证信息',
      // sorter: false,
      // sortField: '',
      dataIndex: 'attackForensics',
      // key: 'operation',
      width: 1 / 12,
      scopedSlots: { customRender: 'attackForensics' }
    },
    {
      title: '进程取证信息',
      // sorter: false,
      // sortField: '',
      dataIndex: 'processForensics',
      // key: 'operation',
      width: 1 / 12,
      scopedSlots: { customRender: 'processForensics' }
    },
    {
      title: '线程取证信息',
     // sorter: false,
      // sortField: '',
      dataIndex: 'threadForensics',
      // key: 'operation',
      width: 1 / 12,
      scopedSlots: { customRender: 'threadForensics' }
    },
    {
      title: '内存取证信息',
      // sorter: false,
      // sortField: '',
      dataIndex: 'memoryForensics',
      // key: 'operation',
      width: 1 / 12,
      scopedSlots: { customRender: 'memoryForensics' }
    },
  ];
  
  const data = [];

  export default {
    inject: ["reload"],
    data() {
      this.cacheData = data.map(item => ({ ...item }));
      return {
        isDrawerShow: false,
        isChangedDrawerShow: false,
        currDrawerShowform: [],
        currChangedDrawerShowform: [],
        searchName: '',
        loading: false,
        queryLists: [],
        ruleForm: {},
        rules: {
          inquerydata: [
            {
              required: true,
              min: 0,
              max: 30,
              message: "查询数据不能为空",
              trigger: "change",
            },
          ],
        },
        queryObj: {
          // namef: '',
          // messagef: '',
          // timef: '',
          // hash: '',
          // user: ''
        },
        isspin: false,
        isresult: false,
        layout: {},

        data,
        datalt: data,
        columns: columns,
        editingKey: '',
        querydata: [],
        flag: 0,
        // uuid: this.msg,
      };
    },
    mounted() {
      this.getAttackData();
    },
    // name: 'addModal',
    // props: {
    //   // modalVisible: Boolean,
    //   msg: {
    //     type: String,
    //     required: true,
    //   }
    // },
    // props: ['msg'],
    computed: {
      //监听父组件的数值变化
      // watchUuid() {
      //   return this.msg;
      // },
    },
   
    methods: {
      // 处理取证按钮点击
        navigateToForensics(type, uuid) {
        console.log('点击的取证类型:', type);  // 'thread', 'process', 'memory'
        console.log('当前记录:', uuid);
        
        // 根据按钮类型来跳转
        if (type === 'thread') {
            this.$router.push({
              path: '/ThreadForensics',
              query: { uuid: uuid }
            });
          // this.$router.push(`/ThreadForensics?data=${JSON.stringify(record)}`);
        } 
        else if (type === 'attack') {
            this.$router.push({
              path: '/Attack',
              query: { uuid: uuid }
            });
          }
        else if (type === 'process') {
            this.$router.push({
              path: '/processforensics',
              query: { uuid: uuid }
            });
          // this.$router.push(`/processforensics?data=${JSON.stringify(record)}`);
        } else if (type === 'memory') {
            this.$router.push({
              path: '/MemuseForensics',
              query: { uuid: uuid }
            });
          // this.$router.push(`/MemuseForensics?data=${JSON.stringify(record)}`);
        }
      },


      async getAttackData() {
        const resData = await axios({
          methods: 'get',
          url: '/apilog/queryAllAttact'
        }).then((res) => {
          res.data.result.forEach((item) => {
            item.last_time = parseTime(item.last_time);
            item.start_time = parseTime(item.start_time);
            item.certificate_number = getCertificateNumber(item.certificate_number);
          })
          console.log("res:", res);
          this.data = res.data.result;
          console.log(this.data);
          this.datalt = this.data;
          console.log(this.datalt);
          this.querydata = this.data;
          // console.log("uuid:", this.uuid);
          // console.log("msg:", this.msg);
          // console.log("this:", this);
        });
      },
      //开始取证按钮
      async startForensics() {
        const resData = await axios({
          method: 'post',
          url: '/apilog/createInfo',
          data: {
            "uuid": "10086",
            "info": {
              "start_time": "1421927414",
              "last_time": "1421927416",
              "attack_category": "Reconnaissance",
              "attack_subcategory": "HTTP",
              "protocol": "tcp",
              "source_IP": "175.45.176.0",
              "source_port": "13284",
              "destination_IP": "149.171.126.16",
              "destination_port": "80",
              "attack_name": "Domino Web Server Database Access: /doladmin.nsf (https://strikecenter.bpointsys.com/bps/strikes/recon/http/domino/access_domino_doladmin_nsf.xml)",
              "attack_reference": "-"
            }
          }
        }).then((res) => {
          console.log("start_forensics_res:", res);
          this.reload;
          this.flag = 1;
          this.tableRowClass();
        });
      },
      //提交查询按钮
      submitForm() {
        if (this.ruleForm.inquerydata && this.ruleForm.inquerydata !== '') {
          this.datalt = this.querydata.filter(

            (p) => {

              return p['attack_category'] == this.ruleForm.inquerydata
            }
          )

        } else {
          this.datalt = this.data
        }
      },
      getDetial(record, index) {  
        console.log('点击的记录:', record);
       
        this.currDrawerShowform = [];
        this.currChangedDrawerShowform = [];

        // 保存当前选中的记录
        this.selectedRecord = record;

        // 判断is_changed的值，如果为'1'，展示新的抽屉
        const isChanged = String(record.is_changed); // 将 is_changed 转换为字符串

         // 填充左侧抽屉数据 (根据 is_changed 的值来决定展示的字段)
         if (record.is_changed === '1' || record.is_changed === true || record.is_changed === 1) {
      // 当is_changed为1时，左侧抽屉显示old字段的数据
          if (record.old && Object.keys(record.old).length > 0) {
            for (let key in record.old) {
              let obj = {
                title: key,  // 字段名作为标题
                value: record.old[key]  // 字段值作为显示内容
              };
              if(key==="is_changed"){
                obj.value = '是'
              }
              this.currDrawerShowform.push(obj);
            }
          }

      // 填充右侧抽屉数据，显示非old字段
      for (let key in record) {
        if (key !== 'old') {  // 排除old字段
          let obj = {
            title: key,
            value: record[key]
          };
          this.currChangedDrawerShowform.push(obj);
        }
      }

      // 同时显示左右抽屉
      this.isDrawerShow = true;  // 显示左侧抽屉
      this.isChangedDrawerShow = true;  // 显示右侧抽屉
    } else {
      // 当is_changed为0时，左侧抽屉只显示非old字段的数据
      for (let key in record) {
        if (key !== 'old') {  // 排除old字段
          let obj = {
            title: key,
            value: record[key]
          };
          if(key ==='is_changed'){
            obj.value = '否'
          }
          this.currDrawerShowform.push(obj);
        }
      }

      // 只显示左侧抽屉，右侧抽屉不显示
      this.isDrawerShow = true;
      this.isChangedDrawerShow = false;
    }
        
      },
      verify(record, index) {
        console.log("record!!!:", record);
        this.currDrawerShowform = []
        for (let key in record) {
          let obj = {
            "title": '',
            "value": '',
          };
          obj.title = key;
          this.columns.forEach(item => {
            //console.log("item:", item)
            if (item.dataIndex === key) {
              //console.log("item.dataIndex", item.dataIndex)
              obj.title = item.title
            }
          })
          //obj.title = key;
          obj.value = record[key];
          this.currDrawerShowform.push(obj);
          this.isDrawerShow = false;
        }
        console.log(this.currDrawerShowform);
        var transit = {
          "ID": this.currDrawerShowform[16].value,
          "hash": this.currDrawerShowform[15].value
        };
        // var ID = this.currDrawerShowform[14].value;
        this.$router.push({ path: '/tree', query: { transit: transit } });
      },
      /* 修改table样式 */
      customHeaderRow(column) {
        column.forEach((item, index) => {
          column[index].className = 'customHeaderRowClass'
        })
      },
      customRow(record) {
        return {
          style: {
            'color': '#91D5FF'
          }
        }
      },
      tableRowClass(record, index) {
        if (this.flag == 1) {
          if (index == 0) {
            //   if(index == 0){
            //     console.log("this1:",this);
            console.log("index:", index);
            return "rowClass";
            //   }
            //   console.log("this2:",this);
            //   console.log("record:",record);

          }
          // console.log("this3:",this);
          else {
            console.log("flag:", this.flag);
            return "";
          }
        }

      },
      // changeValFn(e) {
      //   this.$emit('changeMsg', e.target.value)
      // },
    }
  }
</script>
<style lang="less" scoped>
  .mains {
    width: 100%;
    height: 180px;
    /* 块级元素居中 */
    margin: 0 auto;
    padding: 20px;
    border: 2px solid #e6f7ff;
    border-radius: 10px;
    background-color: #fafafa;
  }

  .clearfloat {
    clear: both;
    height: 0;
  }

  .querybutton {
    float: right;
  }

  .dongtaicss {
    background-color: #abee;
  }

  .dongtaicss_change {
    background-color: #eea;
  }

  .div-info-detail {
    margin: 27px 0 0 0;
  }

  /* result */
  .res-peripheral {
    /* 绝对定位s1 */
    /* height: 580px; */
    position: relative;
    /* border:1px solid sienna; */
    background-color: #F8FCFF;
    border-radius: 5px;
    /*四周都有阴影 0px 0px  8px 0px */
    /*靠右靠下有阴影 5px 2px 6px */
    box-shadow: 2px 2px 3px #d0d0d0;
  }

  .res-endogenous {
    /* 绝对定位s2 */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    /* 绝对定位over */
    width: 580px;
    /* height: 560px; */
    border-radius: 20px;
  }

  .info-detail-label {
    display: inline-block;
    font-size: 16px;
    font-family: PingFang-SC-Heavy, PingFang-SC;
    font-weight: 800;
    color: #3f5ecf;
    line-height: 26px;
    text-shadow: 0px 2px 4px ~"rgb(192 192 192 / 50%)";
  }

  .info-detail-value {
    display: inline-block;
    width: 65%;
    vertical-align: top;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #262626;
    line-height: 26px;
    /* 自动换行 */
    word-break: break-all;
  }

  .spin-large {
    textAlign: center;
    /* background: rgba(0, 0, 0, 0.05); */
    border-radius: 4px;
    margin-bottom: 20px;
    padding: 30px 50px;
    margin: 20px 0;
  }

  .editable-row-operations a {
    margin-right: 8px;
  }

  /deep/.customHeaderRowClass {
    background-color: #6aaee8 !important;
    color: #fff !important;
  }

  /deep/.rowClass {
    color: red !important;
  }
</style>